<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <script src="../lib/flexible.js"></script>
    <link rel="stylesheet" href="../lib/vant.css" />
    <link rel="stylesheet/less" href="../style/index.less" />
    <script src="../lib/less.min.js"></script>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vant.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/base64.min.js"></script>
    <script ignore src="../js/env.js"></script>
    <script ignore src="../js/utils.js"></script>
    <title>数据明细</title>
  </head>
  <body>
    <div id="app">
      <div class="home-flowPath-container">
        <div
          class="nav-bar-container"
          :style="{
        paddingTop: (client == 'App' ? statusBarHeight || 20 : 0) + 'px',   
        background: '#385AF9',
      }"
        >
          <van-nav-bar
            @click-left="onClickBack($event)"
            left-arrow
            :style="{ background: '#385AF9'}"
          >
            <template #left>
              <van-icon name="arrow-left" :size="22" color="#FFFFFF" />
            </template>
            <template #title>
              <div class="van-nav-bar-title" :style="{ color: '#FFFFFF' }">
                数据明细
              </div>
            </template>
          </van-nav-bar>
        </div>
        <div class="open-container">
          <div class="pull-refresh-container">
            <van-pull-refresh
              :value="loading"
              @refresh="onRefresh"
              ref="pull-refresh"
            >
              <div style="height: 100%">
                <div class="card-list" v-for="(v, i) in dataSource" :key="i">
                  <div class="title">{{ v.equName[0] }}</div>
                  <div class="row">
                    <div class="lable">浇筑部位：</div>
                    <div class="value">{{ v.placePart[0] }}</div>
                  </div>
                  <div class="line-row">
                    <div class="item">
                      <div class="lable">强度等级：</div>
                      <div class="value">{{ v.strengthGrade[0] }}</div>
                    </div>
                    <div class="item">
                      <div class="lable">批次号：</div>
                      <div class="value">{{ v.orderid[0] }}</div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lable">出料时间：</div>
                    <div class="value">{{ v.dischargeTime[0] }}</div>
                  </div>
                  <van-collapse v-model="activeName" accordion>
                    <van-collapse-item :name="v.id">
                      <template #title>
                        <div>更多</div>
                      </template>
                      <template #right-icon>
                        <div
                          class="arrow-icon"
                          :class="[activeName.indexOf(v.id) > -1 ? 'open' : 'close']"
                        >
                          <van-icon
                            name="arrow-up"
                            :color="
                                activeName.indexOf(v.id) > -1 ? '#FFFFFF' : '#8E8E8E'
                              "
                            :style="{
                                rotate:
                                  activeName.indexOf(v.id) > -1 ? '0deg' : '180deg',
                                transition: '0.5s',
                              }"
                          />
                        </div>
                      </template>
                      <div @click.stop="() => {}">
                        <div class="table">
                          <div class="thead flex">
                            <div class="th">材料名称</div>
                            <div class="th">实际用量</div>
                            <div class="th">理论用量</div>
                            <div class="th">误差量</div>
                            <div class="th">误差率</div>
                          </div>
                          <div class="tbody">
                            <div
                              class="tr flex"
                              v-for="(item, index) in v.tableData"
                              :key="index"
                            >
                              <div class="td">{{ item.mateName }}</div>
                              <div class="td">{{ item.sjnum }}</div>
                              <div class="td">{{ item.llnum }}</div>
                              <div class="td">{{ item.wcnum }}</div>
                              <div class="td">{{ item.wclnum }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </van-collapse-item>
                  </van-collapse>
                </div>
              </div>
              <!-- 触底文案 -->
              <div
                class="reach-bottom-container"
                v-if="isReachBottomText && !loading"
              >
                <van-loading size="24px" v-if="!reachBottomFinished">
                  加载中...
                </van-loading>
                <div class="no-more-data" v-else>~没有更多了~</div>
              </div>
            </van-pull-refresh>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script type="module">
  var app = new Vue({
    el: "#app",
    data() {
      return {
        //是否处于加载中状态
        loading: false,
        //【触底】是否加载结束
        reachBottomFinished: false,
        //是否显示触底文案
        isReachBottomText: false,
        activeName: [],
        dataSource: [],
        //
        statusBarHeight: 0,
        client: "",
      };
    },
    mounted() {
      let { statusBarHeight, client } = getLoginData();
      this.client = client;
      if (client == "App") {
        this.statusBarHeight = statusBarHeight;
      } else {
        this.statusBarHeight = 0;
      }
      this.$nextTick((_) => {
        this.initOperate();
        this.dataSource = JSON.parse(localStorage.getItem("dataSource"));
        this.getField();
      });
    },
    methods: {
      onClickBack() {
        window.history.back();
      },
      initOperate() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        scrollview.addEventListener(
          "scroll",
          debounce((e) => {
            if (
              Math.ceil(e.target.scrollTop + e.target.clientHeight) >=
              e.target.scrollHeight
            ) {
              //触底
              (!this.reachBottomFinished || !this.isReachBottomText) &&
                this.onReachBottom();
            }
          }, 500),
          true
        );
      },
      clacSize() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        if (scrollview.scrollHeight <= scrollview.clientHeight) {
          this.isReachBottomText = false;
          return false;
        }
        return true;
      },
      //触底加载
      onReachBottom() {},

      //下拉刷新开启
      onRefresh() {
        this.loading = true;
        this.getField();
      },

      //查询表头字段
      getField() {
        this.$toast.loading({
          duration: 0,
          forbidClick: true,
          message: "页面加载中",
        });
        return new Promise((resolve, reject) => {
          let { token, tenantCode, userId } = getLoginData();
          axios({
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
              userId,
            },
            url: `${YX_BASE_API_URL}/beam/config-equ-fieldcfg/equFieldList`,
            responseType: "json",
            data: {
              equCode: "",
              flag: "0",
              display: "1",
            },
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              let columns = [];
              let source = [];
              (data?.result || []).forEach((item) => {
                if (this.checkHasData(item.equFieldDtu, this.dataSource)) {
                  columns.push({
                    key: item.equFieldDtu,
                    title: item.equFieldName,
                  });
                }
              });
              columns.filter((col) => {
                return this.dataSource.every((item) => {
                  if (item[col.key]) {
                    source.push({
                      mateName: col.title,
                      mateCode: col.key,
                      sjnum: item[col.key][0],
                      llnum: item[col.key][1],
                      wcnum: item[col.key][2],
                      wclnum: item[col.key][3],
                    });
                  }
                });
              });
              this.dataSource.forEach((v) => {
                this.$set(v, "tableData", source ?? []);
              });
              resolve();
            })
            .catch((_) => {
              reject();
            })
            .finally((_) => {
              setTimeout(() => {
                this.$toast.clear();
                this.loading = false;
              }, 500);
            });
        });
      },
      checkHasData(key = "", data = []) {
        return data
          .map((v) => v[key])
          .flat()
          .some((v) => v != 0);
      },
    },
    destroyed() {
      this.$toast.clear();
    },
  });
</script>
